<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agar Game WebSocket Client</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .connected { background-color: #d4edda; color: #155724; }
        .disconnected { background-color: #f8d7da; color: #721c24; }
        .message-area {
            height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: auto;
            background-color: #f8f9fa;
        }
        .input-area {
            margin-top: 10px;
        }
        input[type="text"] {
            width: 70%;
            padding: 8px;
            margin-right: 10px;
        }
        button {
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .message {
            margin: 5px 0;
            padding: 5px;
            border-radius: 3px;
        }
        .received { background-color: #e7f3ff; }
        .sent { background-color: #d1ecf1; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Agar Game WebSocket Client</h1>
        
        <div id="status" class="status disconnected">
            状态: 未连接
        </div>
        
        <div class="input-area">
            <button onclick="connect()">连接</button>
            <button onclick="disconnect()">断开</button>
            <button onclick="clearMessages()">清空消息</button>
        </div>
        
        <div class="input-area">
            <input type="text" id="messageInput" placeholder="输入消息..." onkeypress="handleKeyPress(event)">
            <button onclick="sendMessage()">发送</button>
        </div>
        
        <div id="messageArea" class="message-area"></div>
    </div>

    <script>
        let socket = null;
        let isConnected = false;

        function connect() {
            if (isConnected) {
                addMessage('已经连接了', 'system');
                return;
            }

            try {
                socket = new WebSocket('ws://localhost:9081/ws');
                
                socket.onopen = function(event) {
                    isConnected = true;
                    updateStatus('已连接', true);
                    addMessage('WebSocket连接已建立', 'system');
                };
                
                socket.onmessage = function(event) {
                    addMessage('收到: ' + event.data, 'received');
                };
                
                socket.onclose = function(event) {
                    isConnected = false;
                    updateStatus('连接已断开', false);
                    addMessage('WebSocket连接已关闭', 'system');
                };
                
                socket.onerror = function(error) {
                    addMessage('连接错误: ' + error, 'error');
                };
                
            } catch (error) {
                addMessage('连接失败: ' + error.message, 'error');
            }
        }

        function disconnect() {
            if (socket && isConnected) {
                socket.close();
            }
        }

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            
            if (message && isConnected) {
                socket.send(message);
                addMessage('发送: ' + message, 'sent');
                input.value = '';
            } else if (!isConnected) {
                addMessage('请先连接WebSocket', 'error');
            }
        }

        function handleKeyPress(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        }

        function updateStatus(text, connected) {
            const statusDiv = document.getElementById('status');
            statusDiv.textContent = '状态: ' + text;
            statusDiv.className = 'status ' + (connected ? 'connected' : 'disconnected');
        }

        function addMessage(text, type) {
            const messageArea = document.getElementById('messageArea');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message ' + type;
            messageDiv.textContent = new Date().toLocaleTimeString() + ' - ' + text;
            messageArea.appendChild(messageDiv);
            messageArea.scrollTop = messageArea.scrollHeight;
        }

        function clearMessages() {
            document.getElementById('messageArea').innerHTML = '';
        }

        // 页面加载时自动连接
        window.onload = function() {
            // 可以在这里添加自动连接逻辑
        };
    </script>
</body>
</html> 